<template>
	<view>
		<view class="bg-box" style="background-image: url(../../static/images/banner-1.png) ;">
			<view class="bg-box-bg"></view>
			<view class="bg-text">
				<text class="bg-box-text cuIcon-back text-gray"></text>
			</view>
			<view class="portrait-box cu-list menu-avatar">
				<view class="cu-item">
					<view class="portrait cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				</view>
				<button class="portrait-but">关注</button>
			</view>
			<view class="portrait-text">
				<view class="portrait-text1">包图君</view>
				<view class="portrait-text2">
					空间与人，一切可行，又皆环绕内心。
				 </view>
			</view>
		</view>
		<view class="information">
			<view class="infor-box">
				<scroll-view scroll-x class="infor-box1 nav text-center bg-white">
					<view class="infor-text cu-item">
						<view class="infor-text1">
							604
						</view>
						<view class="infor-text2">
							粉丝
						</view>
					</view>
					<view class="infor-text cu-item">
						<view class="infor-text1">
							604
						</view>
						<view class="infor-text2">
							粉丝
						</view>
					</view>
					<view class="infor-text cu-item">
						<view class="infor-text1">
							604
						</view>
						<view class="infor-text2">
							粉丝
						</view>
					</view>
					<view class="infor-text cu-item">
						<view class="infor-text1">
							604
						</view>
						<view class="infor-text2">
							粉丝
						</view>
					</view>
				
				</scroll-view>
				<scroll-view scroll-x class="tabs-box nav text-left bg-white">
					<view class="tabs-text cu-item" :class="index==TabCur?'text-blue cur tabs-text1':'tabs-text2'" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="cont">
			<view class="cont-box">
				<image src="../../static/images/pic69.png" mode="" class="cont-box-img"></image>
				<view class="cont-text">
					<text class="cont-text1">包图小区</text>
					<view class="cont-text2">
						10收藏&nbsp;&nbsp;60浏览
					</view>
				</view>
				<view class="cont-text3">
					普通户型&nbsp;&nbsp;&nbsp;现代
				</view>
			</view>
			<view class="cont-box">
				<image src="../../static/images/pic69.png" mode="" class="cont-box-img"></image>
				<view class="cont-text">
					<text class="cont-text1">包图小区</text>
					<view class="cont-text2">
						10收藏&nbsp;&nbsp;60浏览
					</view>
				</view>
				<view class="cont-text3">
					普通户型&nbsp;&nbsp;&nbsp;现代
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabs:["全部","精选","默认"]
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style lang="scss">
	.bg-box{
		width: 100%;
		height:442upx;
		background: no-repeat top;
		background-size: 100% ;
		position: relative;
		.bg-box-bg{
			position: absolute;
			width: 100%;
			height: 100%;
			background:rgba(40,129,255,0.9);
			top: 0;
			left: 0;
		}
		.bg-text{
			width: 80upx;
			height: 120upx;
			text-align: center;
			line-height: 120upx;
			display: inline-block;
			.bg-box-text{
				color: #fff;
			}
		}
		.portrait-box{
			position: relative;
			.portrait{
				width: 120upx;
				height: 120upx;
				top: 0 !important;
				left: 60upx !important;
			}
			.portrait-but{
				width: 120upx;
				height: 60upx;
				border-radius: 30upx;
				color: #3589FF;
				font-size: 25upx;
				position: absolute;
				right: 30upx;
				top: 30upx;
			}
		}
		.portrait-text{
			color: #fff;
			margin-left: 69upx;
			line-height: 24upx !important;
			.portrait-text1{
				font-size:32upx ;
				font-weight: 600;
				
			}
			.portrait-text2{
				font-size: 23upx;
				margin-top: 22upx;
			}
		}
		
		
	}
	.cu-list.menu-avatar>.cu-item{
		background: none !important;
	}
	.information{
		width: 100%;
		height: 200upx;
		position: relative;
		.infor-box{
			width: 100%;
			position: absolute;
			top: -40upx;
			border-radius: 30upx 30upx 0 0;
			.infor-box1{
				width: 100%;
				height: 153upx;
				border-radius: 30upx 30upx 0 0;
				.infor-text{
					width: 25%;
					margin: 0 !important;
					padding: 0 !important;
					line-height: 45upx !important;
					.infor-text1{
						font-size: 26upx;
						color: #2F2F2F;
						font-weight: 700;
						padding-top: 30upx;
					}
					.infor-text2{
						font-size: 26upx;
						color: #B5B5B5;
						font-weight: 400;
						padding-top: 10upx;
					}
				}
			}
		}
	}
	.tabs-box{
		padding: 0 30upx 0 30upx ;
		.tabs-text{
			font-size: 35upx;
		}
		.tabs-text1{
			font-weight: 600 !important;
		}
		.tabs-text2{
			color: #959595;
		}
	}
	.cont{
		
		.cont-box{
			width: 100%;
			background: #fff;
			padding: 0 30upx;
			margin-bottom: 10upx;
			.cont-box-img{
				width: 690upx;
				height: 520upx;
				margin:28upx 0;
				border-radius: 25upx;
			}
			.cont-text{
				position: relative;
				.cont-text1{
					font-size: 29upx;
					color: #4C4C4C;
					font-weight: 600;
				}
				.cont-text2{
					font-size: 23upx;
					color: #C9C9C9;
					position: absolute;
					right: 0;
					top: 3upx;
				}
				
			}
			.cont-text3{
				font-size: 22upx;
				color: #C9C9C9;
				margin-top: 21upx;
				padding-bottom: 15upx;
			}
			
		}
	}
	
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border: none !important;
	}
</style>
